<template>
  <div>
    <el-dialog
      :title="workTaskForm.name"
      :visible="visible"
      width="80%"
      @close="visible = false"
      :close-on-click-modal="false"

    >
      <el-card v-if="form.workflowStatus != 0" shadow="never">
        <div slot="header">表单数据</div>
        <controlPanel ref="controlPanel" :isEdit="isEdit"></controlPanel>
      </el-card>

     <forecastNodeUser ref="forecastNodeUser" :taskId="workTaskForm.id"></forecastNodeUser>

      <el-card
        shadow="never"
        class="card-provehistory"
        style="margin-top: 10px"
      >
        <div slot="header">审批记录</div>
        <el-card
          shadow="never"
          style="margin-top: 10px"
          v-for="item in workHistories"
          :key="item.id"
        >
          <div slot="header">
            <span
              ><span class="historylabel">节点：</span>{{ item.nodeName }}</span
            >

            <div style="float: right; padding: 3px 0">
              <span v-if="item.workStepType == 0">
                <span v-if="item.isHandled" :underline="false" type="success">
                  <span>
                    <el-link
                      :underline="false"
                      v-if="item.handleType == 0"
                      type="success"
                      >通过</el-link
                    >
                    <el-link
                      :underline="false"
                      v-if="item.handleType == 1"
                      type="danger"
                      >拒绝</el-link
                    >
                    <el-link
                      :underline="false"
                      v-if="item.handleType == 2"
                      type="info"
                      >撤回</el-link
                    >
                    <el-link
                      :underline="false"
                      v-if="item.handleType == 3"
                      type="warning"
                      >转发</el-link
                    >
                    <el-link :underline="false" v-if="item.handleType == 4"
                      >未处理</el-link
                    >
                  </span>
                </span>
                <el-link v-else :underline="false" type="info">待处理</el-link>
              </span>
              <span v-else>
                <el-link :underline="false" type="info">只读</el-link>
              </span>
            </div>
          </div>
          <div>
            <span class="historylabel">处理人：</span>
            {{ (item.handleUser||{}).name }}
          </div>
          <div>
            <p class="historylabel">意见：</p>
            {{ item.comment }}
          </div>
          <div>
            <p class="historylabel">附件:</p>
            {{ item.resourceIds }}
          </div>
          <br />
          <div class="bottom clearfix">
            <time v-if="item.isHandled" class="time">
              <span class="historylabel">处理时间：</span
              >{{ item.handlerTime }}</time
            >
          </div>
        </el-card>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import controlPanel from "@/views/workflows/formDesign/controlPanel.vue";
import forecastNodeUser from "./components/forecastNodeUser.vue";
import { parseTime } from "@/utils/index";
import defaultToVfrom from '@/views/workflows/formDesign/designContentConverters/defaultToVfrom'
export default {
  components: { controlPanel, forecastNodeUser },
  props: {
    value: {
      id: 1,
    },
  },
  watch: {
    value: {
      handler() {
        //this.load();
      },
      deep: true,
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  computed: {
    currentUserId() {
      return this.$store.state.user.user.id;
    },
    canHandle() {
      return (
        this.workHistories.filter(
          (w) =>
            w.handleUser.id == this.currentUserId &&
            w.isHandled == 0 &&
            w.workStepType == 0
        ).length > 0
      );
    },
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
        name: "",
        formDesignId: {},
      },
      controls: [],
      selections: [],
      rules: {
        // title: [{ required: true, message: "请输入", trigger: "change" }],
        // designId: [{ required: true, message: "请选择", trigger: "change" }],
      },
      isEdit: false,
      workTaskForm: {
        id: "",
        createdUserId: "",
        entityFullName: "",
        entityKeyValue: "",
        formData: "{}",
        workTaskStatus: "",
        name: "模拟流程",
        workflowId: {},
      },
      workStep: {
        handleUser: {
          id: "",
        },
        userSelectors: [
          {
            selectorId: "",
            selectorName: "",
            selections: [],
            parameter: "",
            description: "",
            handleType: 0,
          },
        ],
        comment: "",
        stepId: "",
      },
      workHistories: [],
      isForward: false,
    };
  },
  methods: {

    confirm() {
      this.commit();
    },
    show(value) {
      this.visible = true;
      if (value) {
       this.loadData(value);
        // this.$nextTick(() => {
        //   this.$refs.forecastNodeUser.getForecastNodeUsers4Task(this.taskId);
        // });
        
      }
    },
    hide() {
      this.visible = false;
      this.form = {
        name: "",
        formDesignId: {},
        formData: {},
      };
      this.isForward = false;
    },
    loadData(value) {
      this.loading = true;
      this.getWorkTask(value).then((task) => {
        this.$refs.controlPanel.setValue({}, JSON.parse(task.formData || "{}"));

        this.loading = false;
      });
      this.getAllTaskStepsOfWorkTask(value);
    },
    commit() {
      this.$emit("ok-click", {});
      this.hide();
    },

    getWorkTask(id) {
      return this.$store
        .dispatch("workflow/getWorkTask", { id: id })
        .then((res) => {
          this.workTaskForm = res;

          this.getAndRendWithFormDesign(res);
          return res;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    getAllTaskStepsOfWorkTask(taskid) {
      this.$store
        .dispatch("workflow/getAllTaskStepsOfWorkTask", {
          worktaskId: taskid,
        })
        .then((res) => {
          this.workHistories = res;
          //获取当前审批的步骤
          var workStep = this.workHistories.filter(
            (w) =>
              w.handleUser.id == this.$store.state.user.user.id &&
              w.isHandled == 0 &&
              w.workStepType == 0
          )[0];
          this.workStep.handleUser = workStep.handleUser;
          this.workStep.id = workStep.id;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    callback() {
      this.loadData(this.workTaskForm.id);
    },

    getAndRendWithFormDesign(workTask) {
      this.loading = true;
      let keyValue = {};
      try {
        keyValue = JSON.parse(workTask.entityKeyValue);
      } catch (e) {
        keyValue = {};
      }
      let formData = {};
      try {
        formData = JSON.parse(workTask.formData);
      } catch (e) {
        formData = {};
      }
      this.$refs.controlPanel.setValue({}, formData);

      const formDesignId = {
        ...keyValue,
        version: keyValue.versionNo,
      };

      this.$store
        .dispatch("dynamicFormDesign/getFormDesignVersion", formDesignId)
        .then((res) => {
          this.loading = false;
          this.formDesign = res;
          if (res && res.designContent) {
            if(res.designFramework !='vform')
            {
              return defaultToVfrom(res.designContent)
            }
            else{
              return JSON.parse(res.designContent||'{}')
            }
          } else return null;
        })
        .then((controls) => {
          this.loading = false;
          //this.$set(this.form, "formData", JSON.parse(res.formData || "{}"));
          this.$refs.controlPanel.setValue(controls, formData);
        });
    },
  },
};
</script>

<style>
.card-provehistory .el-card__body {
  padding-top: 5px;
  padding-bottom: 5px;
}

.card-provehistory .historylabel {
  color: #999999;
}
</style>
